<template>
  <view class="component-page">
    <view class="page-title">组件</view>

    <!-- 1. 容器组件 -->
    <view class="section">
      <view class="section-title">1.容器</view>
      <view class="component-item">view视图</view>
    </view>

    <!-- 2. 基础内容组件 -->
    <view class="section">
      <view class="section-title">2.基础内容</view>
      <view class="component-item">text文本编辑</view>
      <view class="component-item">icon图标</view>
    </view>

    <!-- 3. 表单组件 -->
    <view class="section">
      <view class="section-title">3.表单组件</view>
      <view class="component-item">button按钮</view>
      <view class="component-item">checkbox多选框</view>
      <view class="component-item">label标签组件</view>
      <view class="component-item">input输入框</view>
      <view class="component-item">textarea多行文本输入框</view>
      <view class="component-item">form表单</view>
    </view>

    <!-- 4. 导航组件 -->
    <view class="section">
      <view class="section-title">4.导航组件</view>
      <view class="component-item">navigator</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ComponentPage'
}
</script>

<style>
.component-page {
  padding: 10rpx;
}

.page-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.section {
  margin-bottom: 10rpx;
}

.section-title {
  background-color: #e6f7e6;
  padding: 20rpx;
  font-weight: bold;
  font-size: 30rpx;
}

.component-item {
  background-color: #fff;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
}
</style>